<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore, useCommonStore } from '@/stores/index.js'
import api from "@/api/api";
import goodsItem from "@/components/store/goodsItem.vue";

// 引入图片资源
import phoneIcon from '@/assets/store/phone.png'
import recommendIcon from '@/assets/store/recommend.png'
import carIcon from '@/assets/store/car.png'

// 响应式数据
const active = ref(0)
const id = ref(-1)
const storeInfo = ref({})
const hasCar = ref(false)
const storeCategoryList = ref([])
const pageInfo = ref({
  pageNum: 1,
  pageSize: 50,
})
const location = ref({
  lat: "",
  lng: "",
})
const recommendList = ref([])

// DOM引用
const itemRefs = ref([])

// 路由和状态管理
const route = useRoute()
const router = useRouter()
const store = useUserStore()
const commonStore = useCommonStore()

// 获取车辆和位置信息
const carList = computed(() => store.carList)
const currentCarIndex = computed(() => commonStore.currentCarIndex)
const locationInfo = computed(() => store.locationInfo)

// 设置元素引用
const setItemRef = (el, index) => {
  if (el) {
    itemRefs.value[index] = el
  }
}

// 方法定义
const handleClickMenu = (index) => {
  console.log(444, index)
  let element = itemRefs.value[index]
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "start",
    })
  }
}

const getStoreDetail = async () => {
  let res = await api.store.getStoreDetail({
    shopId: id.value,
  })
  storeInfo.value = res

  let cate = await api.store.getShopCategory({
    storeId: storeInfo.value.id,
  })

  for (const v of cate) {
    let item = await api.common.getHomeGoods({
      ...pageInfo.value,
      storeId: storeInfo.value.id,
      categoryId: v.categoryId,
    })

    storeCategoryList.value.push({
      text: v.categoryName,
      list: item.data,
    })
  }

  let result = await api.store.getRecommendList({ storeId: id.value })
  recommendList.value = [...recommendList.value, ...result]
}

const takePhone = () => {
  window.location.href = `tel:${storeInfo.value.phone}`
}

const buyNow = async (item) => {
  goDetail(item)
}

const goDetail = (v) => {
  router.push({
    path: "/serveDetail",
    query: {
      goodsId: v.id,
    },
  })
}

// 生命周期钩子
onMounted(() => {
  id.value = route.query.id
  getStoreDetail()
  if (carList.value.length > 0) {
    hasCar.value = true
  }
})
</script>
<template>
  <div class="datail">
    <div class="pic">
      <van-swipe :autoplay="3000" :show-indicators="false" height="330">
        <van-swipe-item v-for="(image, index) in storeInfo.picList" :key="index">
          <van-image width="100%" height="100%" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="time">营业时间: {{ storeInfo.description }}</div>
    </div>
    <div class="main">
      <div class="box_1">
        <div class="name">
          {{ storeInfo.title }}
          <div class="num">
            <van-icon name="star" color="#c10500" /> 5.0
          </div>
        </div>
        <div class="location">
          <div class="address_name">
            <van-icon name="location-o" color="#2e2f30" class="location_icon" />
            <span>门店地址：{{ storeInfo.address }}</span>
            <div class="distance" v-show="storeInfo.distance">
              距您{{ storeInfo.distance }}
            </div>
          </div>
          <div class="phone" @click="takePhone">
            <van-image width="100%" height="100%" :src="phoneIcon" />
          </div>
        </div>
      </div>
      <div class="box_2">
        <div class="flex_col">
          <div class="pic">
            <van-image width="100%" height="100%" :src="recommendIcon" />
          </div>
          <div class="word">门店推荐</div>
        </div>
        <div class="recomend_goods">
          <van-swipe :show-indicators="false" :loop="true" autoplay="3000" vertical :style="{
            height: '65px',
            width: '250px'
          }">
            <van-swipe-item v-for="(v, i) in recommendList" :key="i" :style="{
              height: '65px',
              width: '250px'
            }">
              <goodsItem :recommend="true" :item="v" @buy="buyNow" @click="goDetail(v)"></goodsItem>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="server_box">
      <div class="car_box">
        <div class="car_box_left">
          <div class="icon">
            <van-image width="100%" fit="contain" :src="carIcon" />
          </div>
        </div>
        <div v-if="!hasCar" class="right">+添加爱车</div>
        <div v-else class="right">{{ carList[currentCarIndex].brand }}▼</div>
      </div>
      <div class="treeSelect">
        <van-tree-select height="auto" :items="storeCategoryList" :main-active-index="active"
          @click-nav="handleClickMenu">
          <template #content>
            <div class="content">
              <div v-for="(v, i) in storeCategoryList" :key="i" class="content_item">
                <div class="item_name" :ref="(el) => setItemRef(el, i)">{{ v.text }}</div>
                <div class="item_list">
                  <goodsItem v-for="(a, b) in v.list" :key="b" :item="a" @buy="buyNow" @click="goDetail(a)"></goodsItem>
                </div>
              </div>
            </div>
          </template>
        </van-tree-select>
      </div>
    </div>
  </div>
</template>



<style lang="less" scoped>
.datail {
  min-height: 100vh;
  overflow-x: hidden;

  .pic {
    width: 100%;
    height: 233px;
    position: relative;

    .time {
      color: #fff;
      font-size: 13px;
      position: absolute;
      bottom: 50px;
      left: 17px;
    }

    .back {
      font-size: 23px;
      position: absolute;
      top: 17px;
      left: 17px;
    }
  }

  .main {
    padding: 0 17px;
    position: relative;

    .box_1 {
      margin-top: -40px;
      padding: 17px 17px 23px 10px;
      background-color: #fff;
      border-radius: 7px;

      .name {
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;

        .num {
          font-size: 15px;
          color: #c10500;
          font-weight: bold;
          text-align: center;

          .text {
            font-size: 11px;
            color: #909090;
          }
        }
      }

      .location {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .address_name {
          font-size: 13px;
          margin-left: 5px;

          .location_icon {
            font-size: 17px;
            margin-right: 5px;
            font-weight: bold;
          }
        }

        .distance {
          font-size: 13px;
          margin-top: 3px;
        }

        .phone {
          min-width: 32px;
          max-width: 32px;
          height: 32px;
        }
      }

      .discount {
        margin-top: 18px;
        padding: 7px 8px;
        border-radius: 5px;
        background-color: #ffe4ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #e73353;

        &_name,
        .btn {
          font-size: 13px;
        }

        &_name {
          padding: 3px 5px;
          border: 1px solid #f6a2b4;
          border-radius: 3px;
        }
      }
    }

    .box_2 {
      padding: 17px 0 17px 10px;
      background-color: #fff;
      border-radius: 7px;
      margin-top: 8px;
      display: flex;
      align-items: center;

      .flex_col {
        min-width: 63px;
        height: 65px;
        margin-right: 13px;
        border-right-width: 1px;
        border-right-color: #bbbbbb;
        border-right-style: solid;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 7px;

        .pic {
          width: 45px;
          height: 45px;
        }

        .word {
          font-size: 13px;
          margin-top: 5px;
        }
      }
    }

    .vip_box {
      margin-top: 13px;
      padding: 3px 5px;
      background: linear-gradient(to right, #2a3971, #575791);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 3px;

      .left {
        display: flex;
        align-items: center;

        .icon {
          width: 33px;
          height: 33px;
        }

        .vip_tips {
          font-size: 13px;
          color: #fadab0;
          margin-left: 5px;
        }
      }

      .right {
        padding: 2px 10px;
        background: #d2984e;
        font-size: 13px;
        border-radius: 333px;
        text-align: center;
        color: #fff;
      }
    }
  }

  .server_box {
    margin-top: 13px;
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding-top: 13px;

    .car_box {
      padding: 10px 13px;
      background: #f8faff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px;

      .car_box_left {
        display: flex;
        align-items: center;

        .icon {
          width: 18px;
          height: 16px;
          display: flex;
          align-items: center;
        }

        .car_tips {
          font-size: 15px;
          color: #058efb;
          margin-left: 8px;
          letter-spacing: 1px;
        }
      }

      .right {
        font-size: 15px;
        color: #058efb;
      }
    }

    .treeSelect {
      margin-top: 12px;

      .content {
        &_item {
          margin-bottom: 10px;
          padding: 0 7px;
          box-sizing: border-box;

          .item_name {
            font-size: 15px;
            margin-bottom: 8px;
          }

          .item_list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
          }
        }
      }

      :deep(.van-tree-select) {
        max-height: 1000px;
      }
    }
  }
}

:deep(.van-sidebar-item--select:before) {
  background: #e33754;
}
</style>
